Skip to content

Improve Markover review UI - #195

Draft
lastobelus wants to merge 3 commits into
mainfrom
t3code/improve-markover-ui
Draft

Improve Markover review UI#195
lastobelus wants to merge 3 commits into
mainfrom
t3code/improve-markover-ui

Conversation

@lastobelus

@lastobelus lastobelus commented Aug 20, 2026

Copy link
Copy Markdown
Owner

Summary

Claude’s incremental UI experiment is rebuilt on the canonical app-structure vocabulary landed in #199 and rebased onto main.

The inherited UI changes include:

  • refine the app header, navigation, and three-pane ground hierarchy
  • use SF Pro typography and a consistent weight scale
  • clean up pane seams, focus bars, resizing handles, and responsive widths
  • move review navigation into the left pane
  • connect the selected document-tree row to the right pane
  • use the combined Markover lockup and expose a resizable theme-token inspector
  • remember window size and position

The latest human-QA pass also:

  • reduces the header height to about 80% while retaining the existing logo size
  • hides the checksum by default and exposes it through a development-only inspector option
  • keeps Source changed in the header and repeats it in the Source card
  • gives left- and right-pane view tabs one underline-based visual grammar
  • removes the redundant filtered-inbox Needs me / shown heading
  • preserves keyboard and assistive-technology tab behavior at the minimum supported left-pane width

Naming and theme-token foundation

#199 owns the canonical names: App shell, App header, Pane layout, Left pane, Center pane, and Right pane. This PR uses those names throughout its DOM, TypeScript, CSS, settings, tests, and structural semantic tokens.

The floating development palette is consistently named the theme-token inspector so it does not collide with Markover’s Ember/Ocean/Olive palette setting. It:

  • groups the canonical app-structure tokens together
  • reports live computed custom-property values, including appearance-specific overrides
  • styles itself through --theme-token-inspector-* component roles
  • keeps the App header override scoped to --app-header-background
  • contains the opt-in document-checksum diagnostic

The architecture documentation records this PR’s current structural color mappings.

Validation

  • npm run ci:local
    • build, lint, typecheck, and third-party notices
    • 870 tests
    • packaged Electron smoke test
  • focused UI and accessibility tests
  • exhaustive retired-name scan
  • independent naming/theme and final UI reviews

Status

Draft while human UI QA continues. The PR #195 development watcher is live and ready on the current head.

🤖 Original incremental UI work generated with Claude Code; branch split, rebase, naming alignment, token audit, and subsequent human-QA refinements completed with Codex.

@lastobelus

lastobelus commented Aug 21, 2026

Copy link
Copy Markdown
Owner Author

Work intent

phase: review
summary: "PR #195 human-QA refinements are implemented, validated, pushed, and live in the development watcher for visual review."
touch-points:
  - src/index.html
  - src/renderer.ts
  - src/styles.css
  - test/accessibility.test.ts
  - test/brand.test.ts
  - test/review-inbox-ui.test.ts
done-when:
  - "The app header is approximately 80% of its prior height while the logo retains its current size and controls remain usable."
  - "The checksum is absent by default and available only through an explicit development-build option."
  - "Source changed remains in the header and is repeated in the Source card when applicable."
  - "The left- and right-pane navigation tabs share the right-pane underline visual grammar."
  - "The redundant Needs me / shown list heading is removed without losing an accessible list name."
  - "The pr-195 watcher rebuilds to ready and focused plus full local validation pass."
excludes:
  - "Moving Source changed out of the header."
  - "Changing the center-pane All/Annotated segmented filter."
  - "Shrinking the Markover logo."
  - "Naming or redesigning unrelated components."
  - "Merging PR #195."
blocked-by: []
may-block: []
branch: "t3code/improve-markover-ui"

@lastobelus
lastobelus force-pushed the t3code/improve-markover-ui branch 2 times, most recently from 110c17a to 7769796 Compare August 21, 2026 23:35
Squash the Claude-driven incremental UI series into one net change so it can be rebased cleanly onto the canonical app structure vocabulary.
@lastobelus
lastobelus force-pushed the t3code/improve-markover-ui branch from d5e1e7e to edb657c Compare August 25, 2026 21:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant